<template>
  <ul class='card-list'>
    <li class='fl' v-for="item in data" :key="item.dataId">
      <router-link :to="geneDetailRoute(item.dataId)">
        <img
          :src="item.img_url"
          :alt="item.name"
          :title="item.name"
        />
      </router-link>
      <div class='t-c imgAlt ellipsis'
           :title="item.name"
      >
        <router-link :to="geneDetailRoute(item.dataId)" class="ellipsis">
          {{item.name}}
        </router-link>
      </div>
    </li>
  </ul>
</template>

<script>
  import {fieldState, geneDetailRoute} from "@/mixins"

  export default {
    name: "cardList",
    mixins: [fieldState, geneDetailRoute],
    props: {
      data: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data() {
      return {

      }
    }
  }
</script>

<style scoped>
  .card-list {
    overflow: hidden;
  }
  img {
    cursor: pointer;
    width: 164px;
    height: 93px;
    display: inline-block;
  }
  .imgAlt {
    cursor: pointer;
  }
  .t-c:hover {
    color: #f29838;
  }
</style>
